import React, {Component} from 'react'
import CommentAdd from '../comment-add/comment-add'
import CommentList from '../comment-list/comment-list'
import PropTypes from 'prop-types'

export default class App extends Component{

    // 给组件对象添加state属性
   /* constructor (props) {
        super(props)
        this.state = {
            comments : [
                {username:'Tom', content:'React挺好的!'},
                {username:'Jack', content:'React太难了!'},
            ]
        }
    }*/

    // 给组件对象指定state属性  组件对象不是App这个class  而是this这个对象
    state = {
        comments : [
            {username:'Tom', content:'React挺好的!'},
            {username:'Jack', content:'React太难了!'},
        ]
    }


    // 往comments里面添加comment
    // 这个函数自己不用   而是交给CommentAdd这个组件
    addComment = (comment) => {
        const {comments} = this.state
        comments.unshift(comment)
        // 更新状态
        this.setState({comments})
    }


    // 删除指定评论
    deleteComment = (index) => {
        const {comments} = this.state
        comments.splice(index, 1) // 指定删除的个数
        // 更新状态
        this.setState({comments})
    }


    render() {
        const {comments} = this.state
        return (
            <div>
                <header className="site-header jumbotron">
                    <div className="container">
                        <div className="row">
                            <div className="col-xs-12">
                                <h1>请发表对React的评论</h1>
                            </div>
                        </div>
                    </div>
                </header>
                <div className="container">
                    <CommentAdd addComment={this.addComment}/>
                    <CommentList comments={comments} deleteComment={this.deleteComment}/>
                </div>
            </div>
        )
    }
}



